<template>
	<view class="card_box bg-[length:100%_100%] px-40 pt-56 pb-40">
		<ImageBoxVue class="mb-20 ml-30" src="/static/test/card_title.png" width="236rpx" height="88rpx" />
		<!--  -->
		<view class="flex flex-wrap justify-between mb-30">
			<view class="relative h-140 rounded-md overflow-hidden" style="width:calc(50%)" v-for="e,i in cardTypes" :key="i"
				@click="handleOpen(e)">
				<image class="w-full" :src="e.headimg" mode="widthFix"></image>
				<!-- <ImageBoxVue :src="e.headimg" width="100%" height="100%"></ImageBoxVue> -->
				<!-- <view class="absolute flex flex-col w-full h-full top-35 left-30">
					<text class="card-name text-sm font-bold">{{e.name}}</text>
					<view class="flex items-center mt-6">
						<ImageBoxVue src="/static/test/text_enter.png" width="120rpx" height="48rpx">
						</ImageBoxVue>
						<ImageBoxVue class="ml-6" src="/static/test/icon_enter.png" width="27rpx" height="27rpx">
						</ImageBoxVue>
					</view>
				</view> -->
			</view>
		</view>
		<!--  -->
		<view class="user_box bg-[length:100%_100%] px-20 mb-30" v-for="e,i in Object.keys(user)" :key="i">
			<view class="text-center py-4">
				<text class="text-sm text-white">{{user[e].label}}</text>
			</view>
			<view class="mt-20">
				<view class="flex flex-wrap">
					<UserVue class="item-user mr-20 mb-20" v-for="ea,ia in user[e].list" :key="ia" :val="ea"></UserVue>
				</view>
			</view>
		</view>
		<uni-popup ref="popupRef" type="center" background-color="#F3FAFF" borderRadius="20rpx 20rpx 20rpx 20rpx">
			<view class="p-30 w-[690rpx] pb-60">
				<view class="text-center text-lg font-bold mb-30">选择类型</view>
				<view class="type-item flex justify-between items-center p-20 bg-white rounded-md" :class="{'mt-20': idx != 0}"
					@click="handleGoCard(item)" v-for="(item, idx) in typeList" :key="idx">
					<text class="text-[#666666] text-xs font-bold">{{item.name}}</text>
					<ImageBoxVue src="/static/test/icon_right.png" width="12rpx" height="20rpx"></ImageBoxVue>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from "@dcloudio/uni-app"
	import testApi from '@/apis/apiList/testApi'
	import UserVue from '@/components/UserNew.vue'

	const user = ref({
		card: {
			label: "推荐咨询师",
			list: []
		},
	})
	const popupRef = ref(null)
	const typeList = ref([])
	const cardTypes = ref([])

	const handleOpen = (item) => {
		let url = ''
		if (item.id == '1344045022378459136') {
			url = `/pages/test/cardCategoryFortune?id=${item.id}`
		} else if (item.id == '1344045113122226176') {
			url = `/pages/test/cardCategoryCareer?id=${item.id}`
		} else if (item.id == '1358163510458056704') {
			url = `/pages/test/cardCategoryChoose?id=${item.id}`
		} else if (item.id == '1383605008771055616') {
			url = `/pages/test/cardCategoryEmotion?id=${item.id}`
		}
		uni.navigateTo({
			url: url
		})
		// popupRef.value.open()
		// const opt = {
		// 	id: item.id
		// }
		// testApi.getCardtypeSonlistPrantId(opt).then(res => {
		// 	typeList.value = res.data
		// })
	}

	const handleGoCard = (item) => {
		uni.navigateTo({
			url: `/pages/test/cardArray?id=${item.id}`
		})
	}

	const getTypeList = () => {
		testApi.getCardtypelistPrant().then(res => {
			cardTypes.value = res.data
		})
	}

	const getAnsJobatAnchorlist = () => {
		testApi.getisrecAnchorlist({
			limit: 8
		}).then(res => {
			user.value.card.list = [...res.data]
		})
	}
	onShow(() => {
		getAnsJobatAnchorlist()
		getTypeList()
	})
</script>

<style lang="less">
	.card_box {
		background-image: url("/static/test/card_bg.png");

		.user_box {
			background: url("/static/test/user_bg.png") left top no-repeat;
			background-size: contain;
		}
	}

	.card-name {
		font-weight: 900;
		font-size: 46rpx;
		color: #000000;
		line-height: 40rpx;
	}

	.item-user {
		&:nth-child(4n) {
			margin-right: 0 !important;
		}
	}
</style>